.father {
  width: 100%;
  height: 100vh; /* Magic here */
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  background-image: url("https://yiming_chang.gitee.io/vue-pure-admin/static/png/bg-oEDCYcDF.png");
  background-size: 100% 100vh; //第一个宽度值 第二个高度值
  background-repeat: no-repeat;

  .svg {
    width: 400px;
    height: 100vh;
    //background: pink;
    margin-left: 20%;
    padding-top: 250px;
  }

  .loginbox {
    width: 450px;
    height: 100vh;
    margin-left: 15%;
    //background: pink;

    .loginCenter {
      width: 100%;
      height: 450px;
      //background: yellow;
      margin-top: 250px;

      .loginImgbox {
        width: 50%;
        height: 100px;
        display: flex;
        flex-direction: column;
        padding-left: 180px;
        align-items: center;
        margin-bottom: 15px;

        //background: pink;

        .loginTitle {
          font-size: 28px;
          font-weight: 700;
          padding-left: 50px;
          color: #999;
          display: inline-block;
          white-space: nowrap; /* 禁止自动换行 */
          overflow: hidden; /* 隐藏溢出 */
          border-right: 2px solid black; /* 添加光标效果 */
          animation: typing 2s steps(25, end) forwards, blinkCursor 0.5s step-end infinite alternate;
        }

        @keyframes typing {
          from {
            width: 0; /* 从 0 宽度开始 */
          }
          to {
            width: 100%; /* 最终显示完整文本 */
          }
        }

        @keyframes blinkCursor {
          0% {
            border-right-color: transparent; /* 光标消失 */
          }
          100% {
            border-right-color: black; /* 光标出现 */
          }
        }


      }

      .loginForm {
        width: 100%;
        height: 70%;
        //background: yellow;
        .usernameInput {
          width: 100%;
          margin-top: 5%;
          margin-bottom: 5%;
          animation: slideUp 0.8s cubic-bezier(0.25, 1.5, 0.75, 1) 0s forwards; /* 动画名称、持续时间、速度函数、延迟时间、结束模式 */
        }

        .passwordInput {
          width: 100%;
          margin-bottom: 5%;
          animation: slideUp 0.8s cubic-bezier(0.25, 1.5, 0.75, 1) 0s forwards; /* 动画名称、持续时间、速度函数、延迟时间、结束模式 */
        }

        .remanber {
          animation: slideUp 0.8s cubic-bezier(0.25, 1.5, 0.75, 1) 0s forwards;
        }

        .loginBtn {
          width: 100%;
          height: 35px;
          animation: slideUp 0.8s cubic-bezier(0.25, 1.5, 0.75, 1) 0s forwards; /* 动画名称、持续时间、速度函数、延迟时间、结束模式 */
        }

        /* 定义从下向上的跳动动画 */
        @keyframes slideUp {
          0% {
            opacity: 0;
            transform: translateY(20px);
          }
          40% {
            opacity: 1;
            transform: translateY(-5px);
          }
          60% {
            transform: translateY(5px);
          }
          80% {
            transform: translateY(-3px);
          }
          100% {
            transform: translateY(0);
          }
        }
      }

    }
  }

}






